import { forwardRef, useImperativeHandle } from 'react';

import { usePatchElement } from './utils';

export interface ElementsHolderRef {
  patchElement: ReturnType<typeof usePatchElement>[1];
}

export const ElementsHolder = forwardRef<ElementsHolderRef>((_, ref) => {
  const [elements, patchElement] = usePatchElement();

  useImperativeHandle(ref, () => {
    return {
      patchElement
    };
  });

  return <>{elements}</>;
});
